import React, { useState } from 'react'
function PageA (props) {
  const { onClick, children } = props
  console.log(1111)
  return (
    <div onClick = { onClick }>
      { children }
    </div>
  )
}
function PageB (props) {
  const { onClick, name } = props
  console.log(2222)
  return (
    <div onClick = { onClick }>
      { name }
    </div>
  )
}
function App() {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)
  const clickHandler1 = () => {
    setA(a + 1)
  }
  const clickHandler2 = () => {
    setB(b+1)
  }
  return (
    <>
      <PageA onClick = { clickHandler1 } >{a}</PageA>
      <PageB onClick = { clickHandler2 } name={b}></PageB>
    </>
  )
}

export default App
